<template>
    <div>
        <!-- header -->
        <div class="header_box">
            <div>
                <van-icon class="icon" name="arrow-left" @click="back" />
            </div>
            <div name="center">批量下架</div>
            <div name="right" @click="showPopup">确定</div>
        </div>
        <!-- list -->
        <div>
            <!-- vant侧边导航 -->
            <van-tree-select
                height="55vw"
                :items="mainTypes"
                :main-active-index.sync="active"
                :style="{ minHeight: NewHeigh }"
            >
                <template #content>
                    <!-- right -->
                    <div>
                        <div>
                            <div class="p">
                                <div class="d-flex">
                                    <van-search
                                        v-model="value"
                                        show-action
                                        placeholder="请输入搜索关键词"
                                        @search="onSearch"
                                    >
                                        <template #action>
                                            <div @click="checkAll" class="font-sm">全选</div>
                                        </template>
                                    </van-search>
                                </div>

                                <div v-for="(item, index) in dataList" :key="index">
                                    <van-checkbox-group
                                        ref="checkboxGroup"
                                        v-model="CheckedAllArr"
                                        @change="handleChecked"
                                    >
                                        <van-checkbox :name="item.id" style="width: 100%">
                                            <van-row>
                                                <van-card
                                                    :num="item.goodsInventory"
                                                    :price="item.goodsPackingFee"
                                                    :desc="'月售' + item.goodsPrice"
                                                    :title="item.chineseName"
                                                    thumb="tup"
                                                    :tag="item.cnGoodsDescription"
                                                />
                                            </van-row>
                                        </van-checkbox>
                                    </van-checkbox-group>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </van-tree-select>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { Dialog } from 'vant'
import { CommApi, outSuccess } from '../../https/Commit.js'

export default {
    name: 'manageView',
    data() {
        return {
            active: 0,
            mainTypes: [
                {
                    text: '石磨肠粉'
                },
                {
                    text: '面食小吃'
                },
                {
                    text: '粥食小吃'
                }
            ],
            value: '',
            dataList: [],
            checkAllFlag: false, //全选判断标识
            CheckedAllArr: [] //全选数组
        }
    },
    created() {
        this.height = window.innerHeight - 50
        this.NewHeigh = this.height + 'px'
        console.log(this.NewHeigh)
        CommApi(1)
            .then((res) => {
                console.log('成功', res)
                this.dataList = res.data
                console.log(this.dataList)
            })
            .catch((err) => {
                console.log('err', err)
            })
    },

    methods: {
        back() {
            this.$router.go(-1)
        },

        showPopup() {
            Dialog.confirm({
                message: '是否下架'
            })
                .then(() => {
                    // on confirm
                    this.$router.push('/CommodityMan')
                    console.log(this.CheckedAllArr)
                    outSuccess(this.CheckedAllArr)
                        .then((res) => {
                            console.log(res)
                            this.$router.push('/CommodityMan')
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                })
                .catch(() => {
                    // on cancel
                })
        },
        checkAll(val) {
            let checkedCount = this.CheckedAllArr.length
            if (val) {
                //全选
                this.CheckedAllArr = this.dataList.map((item) => item.id)
            } else {
                //取消全选
                if (checkedCount === this.dataList.length) {
                    //如果不增加这个条件判断点击某一项时会全部取消
                    this.CheckedAllArr = []
                }
            }
        },
        //单选
        handleChecked() {
            this.checkAllFlag = this.CheckedAllArr.length == this.dataList.length
        },
        getDataList() {
            this.checkAllFlag = false
            this.CheckedAllArr = []
        },
        onSearch(val) {
            Toast(val)
        },
        onCancel() {
            Toast('取消')
        }
    }
}
</script>

<style class="scss" scoped>
.icon {
    font-size: 18px;
}
.header_box {
    justify-content: space-around;
}
.van-card {
    background: #fff;
}
</style>
